<div class="apes-data-kanban-drawer">

  <div apes-col [apesMd]="24">
    <div apes-form-item apes-row class="apes-item" style="padding: 16px;">
      <formly-form [model]="model" [fields]="field" [options]="options" [form]="form"></formly-form>
    </div>

    <apes-list [apesDataSource]="rowData"
               class="ng-table"
               [apesBordered]="true"
               [apesHeader]="headerKanban"
               [apesRenderItem]="defaultItem">
      <ng-template #headerKanban>
        <div apes-row class="ng-table-row">
          <div apes-col class="ng-table-col" [apesSpan]="1">序号</div>
          <div apes-col class="ng-table-col" [apesSpan]="5">运单</div>
          <div apes-col class="ng-table-col" [apesSpan]="11">商品编码/商品名称/发货件数/单位</div>
          <div apes-col class="ng-table-col" [apesSpan]="3">发货地
          </div>
          <div apes-col class="ng-table-col" [apesSpan]="3">收货地</div>
        </div>
      </ng-template>
      <ng-template #defaultItem let-item let-i="index">
        <apes-list-item>
          <div apes-col class="ng-table-col" [apesSpan]="1">{{i+1}}</div>
          <div apes-col class="ng-table-col" [apesSpan]="5">
            <span>{{item.waybill.id}}</span>
            <span *ngIf="item.transit">[中转]</span>
          </div>
          <div apes-col class="ng-table-col" [apesSpan]="11">
            <div *ngFor="let product of item.waybill.waybillCargoDetailsSet">
              <span>{{product.productId.id}}</span>|
              <span>{{product.productId.name}}</span>|
              <span>{{product.loadingQty}}</span>|
              <span>{{product.productUomId.name}}</span>
            </div>
          </div>
          <div apes-col class="ng-table-col" [apesSpan]="3">{{item.waybill.deliveryAddress.name}}</div>
          <div apes-col class="ng-table-col" [apesSpan]="3">{{item.waybill.shippingAddress.name}}</div>
        </apes-list-item>
      </ng-template>
      <ng-container *ngIf="rowData.length == 0">
        <apes-list-item>
          <div class="data-kanban-table-text">{{tableText}}</div>
        </apes-list-item>
      </ng-container>
    </apes-list>
  </div>

</div>

